<template>
  <div class=" module article_module">
    <div class="header">
      <div class="title_grp">
        <div class="title_icon"></div>
        评论
      </div>
      <div class="change_type">
        <span :class="{'select': isNew }" @click="getNew">最新</span> / <span :class="{'select': !isNew}" @click="getHot">最热</span>
      </div>
    </div>
    <ul>
      <li v-for="v in comment">
        <div class="user_grp">
          <div class="img_grp">
            <img :src="v.user_img" alt="">
          </div>
          <div class="user_name">
            {{v.user_name}}
          </div>
          <div class="c_time">
            {{v.comment_time | time}}
          </div>
          <div class="icon_grp">
            <span class="iconfont icon-dianzan"></span>
            <span>{{v.zan}}</span>
          </div>
        </div>
        <div class="clear"></div>
        <div class="comment">
         {{v.comment}}
        </div>
      </li>

    </ul>
  </div>
</template>

<script>

  export default {
    name:'Comment',
    props:{
      comment:Array
    },
    computed:{

    },
    data(){
      return{
        isNew:true,
      }
    },
    methods:{
      getNew(){
        this.isNew = true
        this.changeCommentType()
      },
      getHot(){
        this.isNew = false
        this.changeCommentType()
      },
      changeCommentType(){
        if(this.isNew){
          this.$emit('changeType',1)
        }else {
          this.$emit('changeType',2)
        }
      }
    }
  }
</script>

<style scoped>
  .module .header {
    width: 100%;
    height: 90px;
    line-height: 90px;
    border-bottom: solid 1px #e5e5e5;
    padding: 0 20px;

  }

  .title_grp {
    width: 130px;
    float: left;
    font-size: 34px;
    font-weight: bold;
    color: black;
    position: relative;
  }

  .title_icon {
    width: 6px;
    height: 34px;
    border-radius: 3px;
    background: #059692;
    float: left;
    margin-top: 28px;
    margin-right: 20px;
  }
  .change_type{
    position: absolute;
    width: 150px;
    right: 24px;
    font-size: 24px;
    color: #c5c5c7;
    text-align: right;
  }
  .select{
    color: #059692;
  }
  .img_grp{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    float: left;
    border: solid 1px #e7e1cd;
    margin-right: 16px;
    overflow: hidden;
    margin-left: 7px;
  }
  ul{
   padding:0 26px;
  }
  li{
    padding: 30px 0 60px 0;
    border-bottom: solid 1px #f5f4f7;
  }
  .user_grp{
    height: 62px;
    line-height: 62px;
    color: #999;

  }
  .user_grp div{
    display: inline-block;
  }
  .user_name{
    font-size: 30px;
    margin-right: 26px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
  }
  .c_time{
    font-size: 24px;

  }
  .icon-dianzan{
    font-size: 30px;
  }
  .icon_grp{
    float: right;
  }
  .icon_grp span:nth-of-type(2){
    font-size: 24px;
  }
  .comment{
    width: 586px;
    font-size: 28px;
    color: #333;
    line-height: 1.64;
    margin: 0 50px 0 87px;
  }

</style>
